<template>
  <div id="systemMessageDetail">
    <!-- 面包屑导航 -->
    <BreadcrumbComponent :breadcrumbItems="breadcrumbItems" />

    <!-- 消息详情卡片 -->
    <a-card title="消息详情" class="detail-card" :loading="loading">
      <a-descriptions bordered>
        <a-descriptions-item label="标题" span="3">
          {{ messageDetail.title }}
        </a-descriptions-item>
        <a-descriptions-item label="消息类型">
          <a-tag :color="messageDetail.type === 1 ? 'blue' : 'green'">
            {{ messageDetail.type === 1 ? '任务消息' : '通知消息' }}
          </a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="消息状态">
          <a-tag :bordered="false" color="processing" v-if="messageDetail.messageStatus == 0">待处理</a-tag>
          <a-tag :bordered="false" color="success" v-else-if="messageDetail.messageStatus == 1">已处理</a-tag>
          <a-tag :bordered="false" color="success" v-else>已发送无需处理</a-tag>
        </a-descriptions-item>
        <a-descriptions-item label="处理人">{{ messageDetail.handler ?? '无' }}</a-descriptions-item>
        <a-descriptions-item label="消息内容" span="3">
          <div class="message-content">
            <p>{{ messageDetail.content }}</p>
          </div>
        </a-descriptions-item>
        <a-descriptions-item label="创建时间">{{ $formatDate(messageDetail.createdAt) }}</a-descriptions-item>
        <a-descriptions-item label="更新时间">{{ $formatDate(messageDetail.updatedAt) }}</a-descriptions-item>
      </a-descriptions>
      <div class="card-actions" style="margin-top: 24px; text-align: center" v-if="messageDetail.messageStatus == 0">
        <a-button type="primary" @click="handleEdit">处理消息</a-button>
      </div>
    </a-card>
    <!-- 操作按钮 -->
    <BackButton />

    <a-modal v-model:open="showModalEdit" :footer="null">
      <template #title>
        消息处理
        <a-tag color="warning"><template #icon>
            <ExclamationCircleOutlined />
          </template> ID: {{ messageDetail.id }}</a-tag>
      </template>
      <DynamicForm :fieldConfig="editFieldConfig" @submit="handleEditSubmit" :formData="messageDetail" />
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { systemMessageApi } from '@/api'
import BreadcrumbComponent from '@/components/BreadcrumbComponent.vue'
import { getEditFieldConfig } from '@/models/systemMessage'
import BackButton from '@/components/BackButton.vue'
import DynamicForm from '@/components/DynamicForm.vue'
import { message } from 'ant-design-vue'

const route = useRoute()

// 面包屑导航
const breadcrumbItems = [
  { url: '/system-message', name: '系统消息' },
  { url: '', name: '消息详情' },
]

// 消息详情数据
const messageDetail = ref<any>({})

const loading = ref(false)
// 获取消息详情
const fetchMessageDetail = async () => {
  loading.value = true
  try {
    const { data } = await systemMessageApi.getSystemMessageDetail(Number(route.params.id))
    messageDetail.value = data
  } catch (error) {
    console.error('获取消息详情失败', error)
  } finally {
    loading.value = false
  }
}

// 初始化加载
onMounted(() => {
  fetchMessageDetail()
})

const editFieldConfig = ref<Record<string, any>>({})
// 处理修改操作
const showModalEdit = ref(false)
const editFormRef = ref()
const handleEdit = () => {
  if (Object.keys(editFieldConfig.value).length === 0) {
    editFieldConfig.value = getEditFieldConfig()
  }
  showModalEdit.value = true
}

const handleEditSubmit = async (data: any) => {
  try {
    await systemMessageApi.updateSystemMessage(Number(route.params.id), data)
    message.success('修改成功')
    showModalEdit.value = false
  } catch (error) {
    console.error('修改失败', error)
  } finally {
    // 重新获取消息详情
    editFormRef.value?.resetLoading()
    await fetchMessageDetail()
  }
}
</script>

<style scoped>
.detail-card {
  margin-top: 16px;
}

.message-content {
  padding: 12px;
  background-color: #f5f5f5;
  border-radius: 4px;
  margin-top: 8px;
  white-space: pre-wrap;
  /* 保留换行符和空格 */
  word-break: break-word;
  /* 长文本自动换行 */
  display: block;
  /* 独占一行 */
}
</style>
